<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Girl</title>
    <style>
        form{
            width: 600px;
            margin: 0 auto;
            border: 1px solid pink;
        }
        .myform{
            width: 300px;
            margin: 0 auto;

        }
        h1{
            width: 300px;
            text-align: center;
            color: deeppink;
        }
        table,
        tr,
        th,
        td {
            border: 1px solid #ccc;
        }

        tr {
            height: 40px;
        }

        table {
            border-collapse: collapse;
            width: 630px;
            text-align: center;
            margin: 20px auto;
        }

        thead {
            background-color: yellowgreen;
        }


    </style>
</head>
<body>

 <div class="myform">
     <h1>选妃台</h1>
     <p>
         <span>姓名：</span>
         <input type="text" name="username" class="username">
     </p>
     <p>
         <span>年龄：</span>
         <input type="text" name="age" class="age">
     </p>
     <p>
         <span>价位：</span>
         <select name="price" id="price">
             <option value="699">699</option>
             <option value="599">599</option>
             <option value="499">499</option>
             <option value="399">399</option>
         </select>
     </p>
     <p>
         <span>手机：</span>
         <input type="text" name="phone" class="phone">
     </p>
     <p>
         <button id="bt">确认提交</button>
     </p>
 </div>


<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>价位</th>
        <th>手机</th>
        <th>删除</th>
    </tr>
    </thead>
    <tbody class="tbody">


    </tbody>
</table>

<script>
    let bt=document.getElementById('bt');
    let priceItem=document.getElementById('price');
    let girlData=document.getElementsByTagName('input');
    let tbody=document.getElementsByClassName('tbody')[0];

    let girls = [];
    bt.onclick=function () {
        let girl={
          name:  girlData[0].value,
            age: girlData[1].value,
            price: priceItem.value,
            phone:girlData[2].value
        };

        girls.push(girl);
        console.log(girls);

        var tr=''
        girls.forEach((item,index)=>{
            tr+="<tr class='newData'> "+
                    "<td>"+item.name+"</td>"+
                    "<td>"+item.age+"</td>"+
                    "<td>"+item.price+"</td>"+
                    "<td>"+item.phone+"</td>"+
                    "<td><a href='#'  onclick='del("+index+")'>删除</a> </td>"+
                    "</tr>"

        })

        tbody.innerHTML=tr;


    }

    function del(index) {
        girls.splice(index, 1);
        let delitem=document.getElementsByClassName('newData')[index]
        tbody.removeChild(delitem);

    }
</script>
</body>
</html>